<div class="product-pic-list" id="products" th:attr="data-url=${url}"
	th:attrappend="data-max=${maxPage}">
	<!--/*-->
	<hgroup class="list-head clearfix">
		<div class="list-h-btn">
			<a href="#"><i class="fa fa-sort-amount-desc"></i></a> <a href="#"><i
				class="fa fa-clock-o"></i></a>
		</div>
	</hgroup>
	<!--*/-->
	<!--/*-->
	<hgroup>
		<div class="paging">
			<span> <a href="javascript:;" id="go_first_btn" class="button"
				th:onclick="'javascript:showPage(\'' + ${url} + '\',\'1\',\'products\',\'product_page_btn_\');'">
					<i class="fa fa-angle-double-left"></i>
			</a> <!-- a th:if="${maxPage} <= 1" href="javascript:;" >
			      <i class="fa fa-angle-double-left"></i>
			  </a-->
			</span> <span> <a href="javascript:;" id="go_prev_btn" class="button"
				th:onclick="'javascript:showPage(\'' + ${url} + '\',\'' + ${prevPage} + '\',\'products\',\'product_page_btn_\');'">
					<i class="fa fa-angle-left"></i>
			</a> <!-- a th:if="${curPage} <= 1" href="javascript:;" >
			      <i class="fa fa-angle-double-left"></i>
			  </a-->
			</span> <span th:each="visiblePage : ${visiblePages}"> <a
				th:id="'product_page_btn_' + ${visiblePage.id}" href="javascript:;"
				class="button"
				th:onclick="'javascript:showPage(\'' + ${url} + '\',\'' + ${visiblePage.id} + '\',\'products\',\'product_page_btn_\');'"
				th:text="${visiblePage.id}">1</a>
			</span> <span> <a href="javascript:;" id="go_next_btn" class="button"
				th:onclick="'javascript:showPage(\'' + ${url} + '\',\'' + ${nextPage} + '\',\'products\',\'product_page_btn_\');'">
					<i class="fa fa-angle-right"></i>
			</a> <!-- a th:if="${curPage} >= ${maxPage}" href="javascript:;" >
			      <i class="fa fa-angle-double-left"></i>
			   </a-->
			</span> <span> <a href="javascript:;" id="go_last_btn" class="button"
				th:onclick="'javascript:showPage(\'' + ${url} + '\',\'' + ${maxPage} + '\',\'products\',\'product_page_btn_\');'">
					<i class="fa fa-angle-double-right"></i>
			</a> <!-- a th:if="${maxPage} <= 1" href="javascript:;" >
			      <i class="fa fa-angle-double-left"></i>
			   </a-->
			</span>
		</div>

		<div class="go-page">
			<span th:inline="text">总共[[${maxPage}]]页,[<input
				id="product_go_page_input" type="text" placeholder="1" />]页 <a
				href="javascript:;" id="products_go_page_btn" class="button"
				th:onclick="'javascript:goPage(\'' + ${url} + '\',\'' + ${maxPage} + '\',\'product_go_page_input\',\'products\',\'product_page_btn_\');'">跳转</a>
			</span>
		</div>

	</hgroup>
	<!--*/-->
	<ul class="clearfix da-thumbs retention-ele movedown-retention" th:each="tagList:${page.results}"
		id="da-thumbs">
		<li th:each="tag:${tagList}" class="list-item">
			<div class="list-item-l">
				<div class="item-img">
					<a href="#" th:href="@{${'/product/view/'+tag.id}}" target="_blank">
						<span class="item-inner-img"> <img
							th:src="${@staticResourceUrlProcessor.replaceUrlWithCDNUrl(tag.product!=null?tag.product.defaultImageUrl:'')}"
							src="http://placehold.it/195x185" />
					</span>
						<div href="#" class="item-inner-tit">
							<span
								th:text="${(tag.name==null or tag.name.isEmpty())?tag.product.name:tag.name}">
								WoWWee MiP机器人 </span>
						</div>
					</a>
				</div>
			</div>
			<div class="list-item-r">
				<div class="item-placehold"></div>
			</div>
		</li>
	</ul>

	<!--/*-->
	<ul class="clearfix">
		<li>
			<div class="list-item">
				<div class="item-img">
					<a href="#"><img
						src="http://192.168.1.113:8080/faxsun/cmsstatic/product/10100/sandisk-1.jpg" /></a>
					<span class="item-inner-tit">WoWWee MiP机器人</span>
				</div>
				<div class="item-placehold"></div>
			</div>
		</li>
		<li>
			<div class="list-item">
				<div class="item-img">
					<a href="#"><img src="http://placehold.it/195x185" /></a> <span
						class="item-inner-tit">WoWWee MiP机器人</span>
				</div>
				<div class="item-placehold"></div>
			</div>
		</li>
		<li>
			<div class="list-item">
				<div class="item-img">
					<a href="#"><img src="http://placehold.it/195x185" /></a> <span
						class="item-inner-tit">WoWWee MiP机器人</span>
				</div>
				<div class="item-placehold"></div>
			</div>
		</li>
	</ul>
	<ul class="clearfix">
		<li>
			<div class="list-item">
				<div class="item-img">
					<a href="#"><img src="http://placehold.it/195x185" /></a> <span
						class="item-inner-tit">WoWWee MiP机器人</span>
				</div>
				<div class="item-placehold"></div>
			</div>
		</li>
		<li>
			<div class="list-item">
				<div class="item-img">
					<a href="#"><img src="http://placehold.it/195x185" /></a> <span
						class="item-inner-tit">WoWWee MiP机器人</span>
				</div>
				<div class="item-placehold"></div>
			</div>
		</li>
		<li>
			<div class="list-item">
				<div class="item-img">
					<a href="#"><img src="http://placehold.it/195x185" /></a> <span
						class="item-inner-tit">WoWWee MiP机器人</span>
				</div>
				<div class="item-placehold"></div>
			</div>
		</li>
	</ul>
	<ul class="clearfix">
		<li>
			<div class="list-item">
				<div class="item-img">
					<a href="#"><img src="http://placehold.it/195x185" /></a> <span
						class="item-inner-tit">WoWWee MiP机器人</span>
				</div>
				<div class="item-placehold"></div>
			</div>
		</li>
		<li>
			<div class="list-item">
				<div class="item-img">
					<a href="#"><img src="http://placehold.it/195x185" /></a> <span
						class="item-inner-tit">WoWWee MiP机器人</span>
				</div>
				<div class="item-placehold"></div>
			</div>
		</li>
		<li>
			<div class="list-item">
				<div class="item-img">
					<a href="#"><img src="http://placehold.it/195x185" /></a> <span
						class="item-inner-tit">WoWWee MiP机器人</span>
				</div>
				<div class="item-placehold"></div>
			</div>
		</li>
	</ul>
	<!--*/-->
</div>